<template>
	<div :id="id"></div>
</template>


<script>


export default {
	name: 'at-treemap',
	data () {
		return {

		}
	},
	props:{
		jsonData:{
			required:true,
			type:Object
		},
		id:{
			type: String,
          	default: function () {
	            let temp = [];
	            for (let i = 0; i < 6; i++) {
	              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
	              temp.push(randomChar);

	            }
	            return temp.reduce((pre, next) => pre + next);
          	}
		}
	},
	watch: {

	},
	mounted () {
		this.init()
	},
	computed: {

	},
	methods: {
		init(){
			let _this=this;
			var myChart = this.myChart==null ? this.$echarts.init(document.getElementById(this.id)):this.myChart;
			function convert(source, target, basePath) {
		        for (var key in source) {
		            var path = basePath ? (basePath + '.' + key) : key;
		            if (key.match(/^\$/)) {

		            }
		            else {
		                target.children = target.children || [];
		                var child = {
		                    name: path
		                };
		                target.children.push(child);
		                convert(source[key], child, path);
		            }
		        }

		        if (!target.children) {
		            target.value = source.$value || 1;
		        }
		        else {
		            target.children.push({
		                name: basePath,
		                value: source.$value
		            });
		        }
		    }

		    var treeData = [];

		    convert(_this.jsonData, treeData, '');
		    _this.$emit('config',myChart,treeData)

			myChart.on('click', function (params) {
				_this.$emit('tmClick',params)
		   	});



		}
	}
}
</script>

